<template>
    <div>
        <el-card class="box-card" shadow="hover" @click="goDetail">
            <div class="content">
                <div class="left">
                    <div class="name">
                        {{ hospitalInfo.hosname }}
                    </div>
                    <div class="tip">
                        <div class="level">
                            <img src="../../assets/赞.png" alt="">
                            <span>{{ hospitalInfo.hostype }}</span>
                        </div>
                        <div class="time">
                            <img src="../../assets/闹钟.png" alt="">
                            <span>放号时间：{{ hospitalInfo.bookingRule?.releaseTime }}</span>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`" alt="">
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="Card">
    import {useRouter} from "vue-router";

    let $router = useRouter()
    let props = defineProps(['hospitalInfo']);

    // 点击卡片事件
    const goDetail = () => {
        $router.push({path:'/hospital',
            query:{
                hoscode:props.hospitalInfo.hoscode
            }
        });
    }
</script>

<style scoped>
    .box-card:hover{
        cursor: pointer;
    }
    .content{
        display: flex;
        justify-content: space-between;
        .left{
            width: 60%;
            .tip{
                color: #7f7f7f;
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
                .level,.time{
                    display: flex;
                    align-items: center;
                    span{
                        margin-left: 5px;
                    }
                }
            }
        }
        .right{
            img{
                width: 50px;
                height: 50px;
            }
        }
    }
</style>